<template>
  <view class="page">
    <view class="user-card" @click="navTo('info')">
      <view class="user-card-hd">
        <view class="user-avatar">
          <image :src="this.avatar" mode=""></image>
        </view>
        <view class="user-name">
          {{this.vuex_realName}}
          <view class="tag">{{this.personTypeName}}</view>
        </view>
      </view>
      <view class="user-card-bd">
        <view class="user-card-desc">{{this.deptName}}</view>
        <view class="user-card-desc">手机号：<text class="value">{{this.phone}}</text></view>
      </view>
      <view class="user-card-edit">编辑资料</view>
    </view>
    <!-- <view class="header">
      <view class="userinfo">
        <view class="image" @click="navTo('info')">
          <u-avatar size="100" :src="this.avatar"></u-avatar>
        </view>
        <view class="info" style="display: flex;justify-content: space-between;">
          <view>
            <view class="username">{{this.vuex_realName}}</view>
            <view class="usercode">{{this.deptName}}</view>
          </view>
        </view>
      </view>
    </view> -->
    <u-cell-group :border="false">
      <u-cell-item v-if="this.vuex_config.switchMode" title="切换角色"
        @click="navTo('/pages/sys/user/switchRole')"></u-cell-item>
      <u-cell-item v-if="this.vuex_config.switchMode" title="全部角色" @click="toAllRole"></u-cell-item>
      <u-cell-item title="使用手册" @click="toHelp()"></u-cell-item>
      <u-cell-item title="系统设置" @click="navTo('setting')"></u-cell-item>
      <u-cell-item title="清除缓存" @click="clearCache"></u-cell-item>
    </u-cell-group>
  </view>
</template>
<script>
  /**
   * Copyright (c) 2013-Now http://aidex.vip All rights reserved.
   */
  export default {
    data() {
      return {
        iconSize: 38,
        deptName: null,
        avatar: '',
        phone: '',
        personTypeName: ''
      };
    },
    computed: {

    },
    onLoad() {
      this.$u.api.user.getUserInfo().then(res => {
        if (res.code == '200') {
          this.phone = res.data.phone;
          this.personTypeName = res.data.personTypeName
        } else if (res.result == 'login') {
          uni.reLaunch({
            url: '/pages/sys/login/index'
          });
        } else {
          this.$u.toast(res.message);
        }
      });
      this.avatarUrl();
      this.getDept();
    },
    methods: {
      avatarUrl() {
        if (this.vuex_avatar) {
          this.avatar = this.vuex_avatar;
        } else {
          this.avatar = this.vuex_config.defaultAvatar;
        }
      },
      navTo(url) {
        uni.navigateTo({
          url: url
        });
      },
      toHelp() {
        window.location = "https://cmet.fjut.edu.cn/632/list.htm";
      },
      getDept() {
        this.$u.api.dept.detail({
          id: this.vuex_deptId
        }).then(res => {
          if (res.code == '200' || res.code == '401') {
            this.deptName = res.data.deptName;
          }
        });
      },
      logout() {
        this.$u.api.logout().then(res => {
          this.$u.toast(res.msg);
          if (res.code == '200' || res.code == '401') {
            let self = this;
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/sys/login/index'
              });
            }, 500);
          }
        });
      },
      clearCache() {
        uni.removeStorage({
          key: 'lifeData',
          success: function(res) {
            uni.showToast({
              title: "缓存清除成功！",
              duration: 4000
            })
          }
        });
      },
      upgrade() {
        // #ifdef APP-PLUS
        this.$u.api.upgradeCheck().then(res => {
          if (res.result == 'true') {
            uni.showModal({
              title: '提示',
              content: res.message + '是否下载更新？',
              showCancel: true,
              success: function(res2) {
                if (res2.confirm) {
                  plus.runtime.openURL(res.data.apkUrl);
                }
              }
            });
          } else {
            this.$u.toast(res.message);
          }
        });
        // #endif
        // #ifndef APP-PLUS
        this.$u.toast('小程序端或H5端无需检查更新')
        // #endif
      },
      toAllRole() {
        let this_ = this;
        this.$u.api.user.getUserInfo().then(res => {
          if (res.code == '200') {
            let data = res.data;
            this_.$u.api.refreshToken({
              tenant_id: this_.vuex_config.tenantId,
              refresh_token: this_.vuex_refreshToken,
              grant_type: 'refresh_token',
              scope: "all",
            }, {
              'Role-Id': this_.vuex_config.switchMode ? data.roleId : '',
              'Dept-Id': this_.vuex_config.switchMode ? data.deptId : ''
            }).then(res => {
              if (res.access_token) {
                this_.setToken(this_, res);
                this_.setPermission(this_);
                this_.goPage();
              } else if (res.error) {
                uni.showToast({
                  title: res.error_description,
                  duration: 2000
                });
              } else {
                uni.showToast({
                  title: "未连接到服务器！",
                  duration: 2000
                });
              }
            });
          } else {
            this.$u.toast(res.message);
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  .page {
    height: 100%;
    background: #f7f7f7;
    padding: 128rpx 32rpx 0;
  }

  .user-card {
    position: relative;
    border-radius: 16rpx;
    padding: 92rpx 32rpx 40rpx;
    background: #fff;
  }

  .user-card-hd {
    position: absolute;
    top: -68rpx;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 48rpx;
  }

  .user-avatar {
    width: 116rpx;
    height: 116rpx;
    box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    background: #A7A8AC;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .user-name {
    flex: 1;
    margin-left: 32rpx;
    font-size: 40rpx;
    font-weight: 700;
    color: #333;

    .tag {
      width: fit-content;
      border-radius: 40rpx;
      padding: 0 24rpx;
      margin-top: 32rpx;
      line-height: 40rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #0052FF;
      background: rgba(0, 82, 255, .1);
    }
  }

  .user-card-bd {
    font-size: 24rpx;
    font-weight: 500;
    color: #999;

    .value {
      font-weight: 700;
      color: #333;
    }
  }

  .user-card-desc+.user-card-desc {
    margin-top: 24rpx;
  }

  .user-card-edit {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 152rpx;
    height: 64rpx;
    border-top-right-radius: 16rpx;
    border-bottom-left-radius: 64rpx;
    padding-right: 16rpx;
    line-height: 64rpx;
    text-align: right;
    font-weight: 500;
    font-size: 26rpx;
    color: #0052FF;
    background: #E6EDFF;
  }

  .u-cell-box {
    border-radius: 16rpx;
    padding: 0 32rpx;
    margin-top: 32rpx;
    background: #fff;
    overflow: hidden;

    /deep/ .u-cell {
      padding: 40rpx 0;
      font-size: 28rpx;
      font-weight: 700;
      color: #333;
      background: transparent;
    }
  }
</style>